<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.8.3.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .wrapper1{
            width: 179px;
            height: 135px;
            background-color: black;
        }
        /*.wrapper2{
            width: 538px;
            height: 405px;
            display: none;
            position: absolute;
        }*/
    </style>
    <script type="text/javascript">
        /*$(function(){
            $(".wrapper1").eq(0).hover(function(){
                $(".wrapper2").eq(0).show();
            },function(){
                $(".wrapper2").eq(0).hide();
            });

            $(".wrapper1").eq(0).mousemove(function(e){
                x = e.pageX;
                y = e.pageY;
                var el = $(".wrapper2").eq(0).offset();
                el.left = x;
                el.top = y;
                $(".wrapper2").eq(0).offset(el);
            });
        });*/
        /*$(function(){
            var htmlTag = '<div class="wrapper2"><img src="../img/1.jpg" alt="图片"/></div>';
            $(".wrapper1").eq(0).hover(function(e){
                $("body").append(htmlTag);
                $(".wrapper2").css({position:"absolute",'left': e.pageX+'px','top': e.pageY+'px'});
            },function(){
                $(".wrapper2").remove();
            }).mousemove(function(e){
                $(".wrapper2").css({position:"absolute",'left': e.pageX+'px','top': e.pageY+'px'});
            });
        });*/
        $(function(){
            var htmlTag = '<div class="wrapper2"><img src="../img/1.jpg" alt="图片"/></div>';
            $(".wrapper1").eq(0).mouseover(function(e){
                $("body").append(htmlTag);
                $(".wrapper2").css({'position':"absolute",'left': e.pageX+'px','top': e.pageY+'px'});
            }).mouseout(function(){
                $(".wrapper2").remove();
            }).mousemove(function(e){
                $(".wrapper2").css({'position':"absolute",'left': e.pageX+'px','top': e.pageY+'px'});
            });
        });
    </script>
</head>
<body>
<!--图片大小538:405-->
    <div class="wrapper1"><!--<img src="../img/1.jpg" alt="图片"/>--></div>
    <!--<div class="wrapper2"><img src="../img/1.jpg" alt="图片"/></div>-->
</body>
</html>